<template>
  <div>
    <div class="areatitle">
          <router-link to="/home/workplace">
          <i class="iconfont icon-back"></i>
          </router-link>
          <div class="inner"></div>
          <div class="atitle">
            通&nbsp;知&nbsp;中&nbsp;心
          </div>

        </div>

        <el-divider></el-divider>

        <div class="notice_main_body">
      <div class="notice_title">团队&nbsp;&nbsp;&nbsp;<el-badge class="mark" :value="teamMessageList.length" style="margin-top: -5px"/></div>
      <el-divider></el-divider>
      <el-table :data="teamMessageList" style="width: 100%">
        <!-- 
             <el-table-column label="用户" width="100px">
          <template slot-scope="scope">
            <span>{{ scope.row.sender }}</span>
          </template>
        </el-table-column>
         -->
       
        <el-table-column label="团队" width="110px">
          <template slot-scope="scope">
            <span>{{ scope.row.teamName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="内容" width="200px">
          <template slot-scope="scope">
            <span>{{ scope.row.content }}</span>
          </template>
        </el-table-column>
        <el-table-column label="时间" width="160px">
          <template slot-scope="scope">
            <span>{{ scope.row.dt }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div v-if="teamNoticeShow(scope.$index)">
              <el-button type="success" round size="mini" class="invite_action" @click="AgreeInvite(scope.$index)"><i class="el-icon-circle-check"></i>&nbsp;&nbsp;同意</el-button>
              <el-button type="danger" round size="mini" class="invite_action" @click="RefuseInvite(scope.$index)"><i class="el-icon-circle-close"></i>&nbsp;&nbsp;拒绝</el-button>
            </div>
            <div v-else>
              <el-button type="primary" round size="mini" class="invite_action" @click="AlreadyRead(scope.$index)">
                <i class="el-icon-circle-close"></i>&nbsp;&nbsp;已读
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="notice_title">评论&nbsp;&nbsp;&nbsp;<el-badge class="mark" :value="commentMessageList.length" style="margin-top: -5px"/></div>
      <el-divider></el-divider>
      <el-table :data="commentMessageList" style="width: 100%">
        <el-table-column prop="article" label="提示" width="280px">
          <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="message" label="内容" width="110px">
          <template slot-scope="scope">
            <span>{{ scope.row.content }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="时间" width="160px">
          <template slot-scope="scope">
            <span>{{ scope.row.dt }}</span>
          </template>
        </el-table-column>
        <el-table-column label="处理" class="invite_action">
          <template slot-scope="scope">
            <el-button type="success" round size="mini" class="invite_action" @click="AlreadyRead2(scope.$index)"><i class="el-icon-circle-check"></i>&nbsp;&nbsp;已读</el-button>
            <!-- 
              <el-button type="danger" round size="mini" class="invite_action" @click="handleHaveRead(scope.$index)"><i class="el-icon-circle-close"></i>&nbsp;&nbsp;忽略</el-button>
             -->
            
          </template>
        </el-table-column>
      </el-table>



      <div class="notice_title">私信&nbsp;&nbsp;&nbsp;<el-badge class="mark" :value="privateMessageList.length"  style="margin-top: -5px"/></div>
      <el-divider></el-divider>
      <el-table :data="privateMessageList" style="width: 100%">
        <el-table-column prop="name" label="用户" width="110px">
          <template slot-scope="scope">
            <span>{{ scope.row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="message" label="内容" width="280px">
          <template slot-scope="scope">
            <span>{{ scope.row.message }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="时间" width="180px" style="padding-left: 20px ">
          <template slot-scope="scope">
            <span>{{ scope.row.time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="处理" class="invite_action" >
          <template slot-scope="scope">
            <el-button type="success" round size="mini" class="invite_action" @click="reply(scope.$index)"><i class="el-icon-circle-check"></i>&nbsp;&nbsp;回复</el-button>
            <el-button type="danger" round size="mini" class="invite_action" @click="handleDel(scope.$index)"><i class="el-icon-circle-close"></i>&nbsp;&nbsp;删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
  </div>



</template>

<script>
import {mapState,mapActions} from 'vuex'

import {
  reqAgreeInvitation, reqJoinTeam, reqRefuseInvitation, reqSolveTeamMessage,
  reqSolveCommentMessage, reqAgreeApply, reqRefuseApply, reqDeletePrivateMessage, reqSendPrivateMessage
} from '../../api'

export default {
  name: "Notice",
  components:{
  },
  //三个列表
  computed:{
    ...mapState(['userInfo','teamMessageList','commentMessageList','privateMessageList',])
  },

  mounted () {
    if(this.userInfo.userid) {
      this.recordTeamMessageList(this.userInfo.userid)
      this.recordCommentMessageList(this.userInfo.userid)
  //    this.recordPrivateMessageList(this.userInfo.userid)
    }
  },

  methods:{
    ...mapActions(['recordTeamMessageList','recordCommentMessageList','recordPrivateMessageList','getTeamMessageList']),
    goTo_Workplace(){
      this.$router.replace('/workplace')
    },
    goTo_PersonInfo(){
      this.$router.replace('/personInfo')
    },
    teamNoticeShow(index){
      if(this.teamMessageList[index].type==="join" ){
        return true
      }
      else return false
    },
    //同意邀请1 
    async AgreeInvite(index){
      if(this.teamMessageList[index].type==="join") {
        //发出同意申请的消息
        const result=await reqAgreeInvitation(this.teamMessageList[index].mid, this.userInfo.userid,true)
        console.log(result)
        console.log('ggg')
        if (result && result.error_code === 0) {
          this.$message({
            message: '接收邀请，加入团队成功',
            type: 'success'
          });
          
          //更新消息列表
          await this.recordTeamMessageList(this.userInfo.userid)
      //    await this.recordCommentMessageList(this.userInfo.userid)
       //   await this.recordPrivateMessageList(this.userInfo.userid)
        } else if (result && result.error_code !== 0) {
          this.$message.error('加入团队失败');
        }
      }
    },
    //拒绝邀请1 / 拒绝申请2
    async RefuseInvite(index){
      console.log('8888888888')
      if(this.teamMessageList[index].type==="join") {
        //发出拒绝邀请的消息
        console.log('5698')
        const res = reqAgreeInvitation(this.teamMessageList[index].mid, this.userInfo.userid,false)
        console.log('tttt')
        console.log('www')
          this.getTeamMessageList()
          console.log('qqqq')
          await this.recordTeamMessageList(this.userInfo.userid)
          console.log('uuu')
          this.$message({
            message: '已拒绝邀请',
            type: 'success'
          });
        
        //更新消息列表
        
     //   await this.recordCommentMessageList(this.userInfo.userid)
      //  await this.recordPrivateMessageList(this.userInfo.userid)
      }
    },
    //已阅读
    async AlreadyRead(index){
      this.$message({
        message: '已阅读',
        type: 'info'
      });
      //删除团队消息通知
      const res1=await reqSolveTeamMessage(this.teamMessageList[index].mid)
      console.log(res1)
      //更新消息列表
      await this.recordTeamMessageList(this.userInfo.userid)
      this.getTeamMessageList()
    },
    
    async AlreadyRead2(index){
      this.$message({
        message: '已阅读',
        type: 'info'
      });
      //删除团队消息通知
      const res1=await reqSolveTeamMessage(this.commentMessageList[index].mid)
      console.log(res1)
      //更新消息列表
      await this.recordTeamMessageList(this.userInfo.userid)
      this.getTeamMessageList()
    },

    //前往查看（跳转对应article）
    //忽略
    async handleHaveRead(index){
      this.$message({
        message: '已忽略该条评论',
        type: 'info'
      });
      //删除评论消息通知
      const res1=await reqSolveCommentMessage(this.commentMessageList[index].messageid)
      console.log(res1)
      //更新消息列表
      await this.recordCommentMessageList(this.userInfo.userid)
    },

    reply(index) {
      this.$prompt('请输入回复内容', '私信', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputErrorMessage: '私信请在140字以内！',
        inputPattern:/^.{0,140}$/,
        inputType:'textarea',
      }).then(async ({value}) => {
        //发送私信
        const res=await reqSendPrivateMessage(this.userInfo.userid,value,this.privateMessageList[index].userid)
        this.$message({
          type: 'success',
          message: '回复成功'
        });
        //输出该条记录
        await reqDeletePrivateMessage(this.privateMessageList[index].messageid)
        //更新私信列表
        await this.recordPrivateMessageList(this.userInfo.userid)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消回复'
        });
      });
    },
    async handleDel(index){
      if(this.privateMessageList[index]) {
        this.$message({
          message:'已删除该条私信',
          type:'info'
        })
        //删除私信通知
        await reqDeletePrivateMessage(this.privateMessageList[index].messageid)
        //更新私信列表
        await this.recordPrivateMessageList(this.userInfo.userid)
      }
    }
  }
}

</script>

</script>

<style scoped>
.area{
  background-color: #faf8f8f1;
}
.areatitle{
  width: 100%;
  height: 30px;
  
}
.atitle{
 margin-left:45%;
 position: absolute;
 top: 15px;
 font-size:20px;
}
.inner{
  height:10px ;
}

.iconfont{
  display: block;
  font-size: 40px;
  color: rgb(133, 126, 126);
  position: absolute;
  left: 70px;
  top:5px;
}
.notice_main_body{
  width: 66%;
  margin:auto;
}
.invite_action{
  opacity: 1;
}
.invite_action:hover{
  opacity: 1;
}
.notice_title{
  font-size: 20px;
  text-align: left;
  margin-top: 30px;
  color: #409eff;
}
</style>
